<template>
	<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="450px">
		<a-spin :spinning="loading">
			<a-form :form="form">
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="宠物类型" :label-col="labelCol" :wrapper-col="wrapperCol"
							v-if="type===0">
							<a-select class="flex-1" :disabled="parentId>0?true:false" placeholder="请选择"
								@change="changeSelect"
								v-decorator="['relatedPetType', { rules: [{ required: true, message: '请选择' }] }]">
								<a-select-option :value="0" key="0">
									狗
								</a-select-option>
								<a-select-option :value="1" key="1">
									猫
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="商品类型" :label-col="labelCol" :wrapper-col="wrapperCol"
							v-if="type===0">
							<a-select class="flex-1" :disabled="parentId>0?true:false" placeholder="请选择"
								@change="changeSelect2"
								v-decorator="['spuType', { rules: [{ required: true, message: '请选择' }] }]">
								<a-select-option :value="0" key="0">
									普通商品
								</a-select-option>
								<a-select-option :value="1" key="1">
									推荐商品
								</a-select-option>
								<a-select-option :value="2" key="2">
									新用户专享
								</a-select-option>
								<a-select-option :value="3" key="3">
									老用户专享
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="父级名称" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-select disabled class="flex-1" placeholder="请选择父级">
								<a-select-option v-for="item in parentList" :key="item.value" :value="item.value">{{
                                    item.name }}
								</a-select-option>

							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="类目名称" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="请输入类目名称" v-decorator="['name',
                                {
                                    rules: [{ required: true, message: '请输入类目名称', whitespace: true }],
                                },
                            ]" maxLength="30"></a-input>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="图片上传" :label-col="labelCol" :wrapper-col="wrapperCol">
							<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
								:show-upload="formgetFileLength(`picUrl`) < 1" accept=".png,.jpg"
								@uploadSuccess="formuploadSuccess($event, `picUrl`)" v-decorator="[
                                    `picUrl`,
                                    {
                                        rules: [{ required: true, message: '请上传图片', type: 'array' }],
                                        initialValue: [],
                                    },
                                ]" />
						</a-form-item>
					</a-col>
				</a-row>

				<a-row :gutter="[24, 0]">
					<a-col :span="20">
						<a-form-item class="mb-15" label="状态" :label-col="labelCol" :wrapper-col="wrapperCol">
							<div class="flex items-center">
								<a-switch @change="checkedChange" checked-children="开" un-checked-children="关"
									v-decorator="['status', { valuePropName: 'checked' }]" :checkedValue="0"
									:unCheckedValue="1" />
								<div class="ml-20">{{ isStatus }}</div>
							</div>
						</a-form-item>
					</a-col>

				</a-row>

			</a-form>
		</a-spin>
	</a-modal>
</template>
<script>
	import {
		get
	} from 'lodash'
	import {
		deductionDetail,
		productCreate,
		productChild,
		productUpdate
	} from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				isStatus: '上架',
				prohibit: false,
				parentList: [{
					name: '顶级',
					value: 0
				}],
				parentId: 0,
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this),
				type: ''
			}
		},
		computed: {

		},
		watch: {

		},
		async created() {

		},
		methods: {
			checkedChange(e) {
				this.form.setFieldsValue({
					status: e == true ? 1 : 0
				})
				this.isStatus = e ? '上架' : '下架'
			},
			formgetFileLength(type) { //获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					picUrl: [data.path],
				})
			},
			changeSelect(e) {
				this.form.setFieldsValue({
					relatedPetType: e,
				})
			},
			changeSelect2(e) {
				this.form.setFieldsValue({
					spuType: e,
				})
			},
			onChange(e) {
				console.log(e.target.value)
			},
			cancel() {

				this.form.resetFields()
				this.showModal = false

			},
			confirmOk() {
				this.form.validateFields((err, values) => {

					if (!err) {
						// this.loading = true

						let data = {
							...this.$utils.trimValue(values),

							picUrl: values.picUrl[0],
							type: this.type,
							parentId: this.parentId,
							status: values.status == true ? 1 : 0
						}
						if (this.info) {
							data.id = this.info.id
						}
						let fun;
						if (this.titles == '新增') {
							fun = productChild;
						} else {
							fun = productUpdate;
						}

						fun(data).then(data => {
							this.$message.success(this.titles + '成功');
							this.$emit('upload')
							this.cancel()
						}).finally(() => this.loading = false)

					}
				})
			},
			getData() {
				this.loading = true
				deductionDetail({
					id: 1
				}).then(data => {
					this.details = data
				}).finally(() => this.loading = false)
			},
			openAdd(data) {
				console.log(data)
				this.titles = '新增'
				this.type = data.type
				this.showModal = true
				this.parentId = 0
				this.$nextTick(() => {
					this.form.setFieldsValue({
						parentId: 0
					})
				})
			},
			open(data) {
				console.log(data)
				this.showModal = true
				this.info = data;
				this.type = data.type
				this.spuType = data.spuType

				this.parentId = data.parentId
				if (data.isPerson == '子') {
					this.parentList = [{
						name: data.parentName,
						value: data.parentId
					}]
					this.titles = '新增';
					this.$nextTick(() => {
						this.form.setFieldsValue({
							relatedPetType: data.relatedPetType,
							parentId: data.parentId,
							status: 1,
							name: '',
							picUrl: [],
							type: data.type,
							spuType: data.spuType
						})
					})

				} else {
					if (data.id) {
						this.titles = '编辑'
						if (data.parentId > 0) {
							this.parentList = [{
								name: data.parentName,
								value: data.parentId
							}]
						}
						this.$nextTick(() => {
							this.form.setFieldsValue({
								...data,
								picUrl: data.picUrl == '' ? [] : data.picUrl.split(',')
							})
						})
					} else {
						this.titles = '新增'
					}

				}



			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;


	}
</style>